<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/sunzbase.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:useBean id="now" class="java.util.Date" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户管理</title>
<style type="text/css">
.table td{
	text-align: center;
}
</style>
</head>
<body>
	<nav class="breadcrumb"> <i class="Hui-iconfont">&#xe67f;</i> 首页
	<span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span>
	用户管理 <a class="btn btn-success radius r"
		style="line-height: 1.6em; margin-top: 3px"
		href="javascript:location.replace(location.href);" title="刷新"><i
		class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="page-container">
		<form id="searchForm">
		<div class="text-c">
			日期范围： <input type="text"
				onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })"
				id="datemin" name="datemin" class="input-text Wdate"
				style="width: 120px;"> - <input type="text"
				onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })"
				id="datemax" name="datemax" class="input-text Wdate"
				style="width: 120px;"> <input type="text" class="input-text"
				style="width: 250px" placeholder="输入会员名称、电话、邮箱" id="search"
				name="search">
			<button type="button" class="btn btn-success radius"
				id="searchSubmit">
				<i class="Hui-iconfont">&#xe665;</i> 搜用户
			</button>
		</div>
		</form>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l"><a href="javascript:;" onclick="datadel()"
				class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i>
					批量删除</a> <a href="javascript:;"
				onclick="member_add('添加用户','note/userAdd','','500')"
				class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>
					添加用户</a></span>
		</div>
		<div class="mt-20">
			<table
				class="table table-border table-bordered table-hover table-bg table-sort" width=100% >
				<thead>
					<tr class="text-c">
						<th width="30"><input type="checkbox" name="" value=""></th>
						<th width="50">编号</th>
						<th width="50">员工ID</th>
						<th width="170">用户名</th>
						<th width="50">性别</th>
						<th width="90">手机</th>
						<th width="170">邮箱</th>
						<th width="50">角色</th>
						<th width="200">加入时间</th>
						<th width="70">状态</th>
						<th width="100">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c">
						<td><input type="checkbox" value="" name=""></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td class="td-status"></td>
						<td class="td-manage"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript"
		src="${webRoot}/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="resources/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="resources/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript">
$(function(){
	$('.table-sort').dataTable({
		"aaSorting": [[ 8, 'desc' ]],//默认第几个排序
		"bStateSave": true,//状态保存
		//"sScrollX": "100%",
		//"sScrollXInner": "110%",
		//"bScrollCollapse": true,
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]}, //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,8,9]}// 制定列不参与排序
		],
		ajax:{  
			url:"${webRoot}/note/searchUser",  
			type:'post',  
			data:$("#searchForm").serialize(),
		},
		columns:[
			{"data":null,"render":function(data,type,full,meta){
					return '<input type="checkbox" value="'+data.id+'" name="userid" class="userid">';
				}
			}, 
			{"data": null, defaultContent: ""},
			{"data": "id"},
			{"data": null,"render": function ( data, type, full, meta ) {
				return '<a title="查看用户信息" href="javascript:;" onclick="member_show(\'查看\',\'note/userinfo\','+data.id+')" class="ml-5" style="text-decoration: none">'+data.username+'</a>';
				}
			},
			{"data": "gender"},
			{"data": "phone"},
			{"data": "email"},
			{"data": "tsRole.rolename"},
			{"data": null,"render": function ( data, type, full, meta ) {
					return formatDate(data.createTime,true);;
	            }
			},
			{"data": null ,"render": function ( data, type, full, meta ) {
					if(data.state==0){
						return '<span class="label label-success radius">已启用</span>';
					}else{
						return '<span class="label label-defaunt radius">已停用</span>';
					}
				}
			},
		   	{"data":null ,"render": function ( data, type, full, meta ) {
			   		var stater;
			   		if(data.state==0){
						stater = '<a style="text-decoration:none" onClick="member_stop(this,'+data.id+')" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>';
					}else{
						stater = '<a style="text-decoration:none" onClick="member_start(this,'+data.id+')" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe631;</i></a>';
					}
			   		if(data.username=='admin'){
			   			stater = '<a title="编辑" href="javascript:;" onclick="member_edit(\'编辑\',\'note/userinfo\','+data.id+',\'\',\'510\')" class="ml-5" style="text-decoration: none"><i class="Hui-iconfont">&#xe6df;</i></a>'+
						'<a style="text-decoration:none" class="ml-5" onClick="change_password(\'修改密码\',\'note/changPwd\','+data.id+',\'700\',\'500\')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>';
			   		}else{
				   		stater += '<a title="编辑" href="javascript:;" onclick="member_edit(\'编辑\',\'note/userinfo\','+data.id+',\'\',\'510\')" class="ml-5" style="text-decoration: none"><i class="Hui-iconfont">&#xe6df;</i></a>'+
								'<a style="text-decoration:none" class="ml-5" onClick="change_password(\'修改密码\',\'note/changPwd\','+data.id+',\'700\',\'500\')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>'+
								'<a title="删除" href="javascript:;" onclick="member_del(this,'+data.id+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>';
			   		}
					return stater;
				}
			}
		],
		   fnDrawCallback : function () {
		        let api = this.api();
		        api.column(1).nodes().each(function(cell, i) {
		            cell.innerHTML = i + 1;
		        });
		    }
	});
});

/* 用户搜索 */
$("#searchSubmit").on("click",function(){
	var datatable = $('.table-sort').DataTable();
	//console.log(datatable);
	datatable.settings()[0].ajax.data = getParameters();
	datatable.ajax.reload();
});
//获取搜索中各选项的值
function getParameters(){
	var params = $("#searchForm").serializeArray();
	//console.log(params);
	var values = {};
	for (var item in params) {
	   values[params[item].name] = params[item].value;
	}
	//console.log(values);
	return values;
}
/*用户-添加*/
function member_add(title,url,w,h){
	layer_show(title,url,w,h);
}
/*用户-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url+"?id="+id,w,h);
}
/*用户-停用*/
function member_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		$.ajax({
			type: 'POST',
			url: '${webRoot}/note/updateUserState',
			data:"id="+id,
			dataType: 'json',
			success: function(data){
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
				$(obj).remove();
				layer.msg('已停用!',{icon: 5,time:1000});
				window.location.reload();
			}
		});		
	});
}

/*用户-启用*/
function member_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$.ajax({
			type: 'POST',
			url: '${webRoot}/note/updateUserState',
			data:"id="+id,
			dataType: 'json',
			success: function(data){
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
				$(obj).remove();
				layer.msg('已启用!',{icon: 6,time:1000});
				window.location.reload();
			}
		});
	});
}
/*用户-编辑*/
function member_edit(title,url,id,w,h){
	layer_show(title,url+"?id="+id,w,h);
}
/*密码-修改*/
function change_password(title,url,id,w,h){
	layer_show(title,url+"?id="+id,w,h);	
}
/*用户-删除*/
function member_del(obj,id){
	var ids = [id];
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			url: '${webRoot}/note/deleteBatch',
			data:"ids="+ids,
			type: 'POST',
			dataType: 'json',
			success: function(data){
				$(obj).parents("tr").remove();
				layer.msg('已删除!',{icon:1,time:1000});
			}
		});		
	});
}
/* 批量删除 */
function datadel(){
	// 判断是否至少选择一项 
	var checkedNum = $("input[name='userid']:checked").length; 
	if(checkedNum == 0) { 
		layer.msg("请选择至少一项!",{icon:2}); 
		return; 
	} 
	layer.confirm('确认要删除吗？',function(index){
		var ids = [];
		$("input[name='userid']:checked").each(function() {
			var id = $(this).val();
			ids.push(id);
		});
		$.ajax({
			url: '${webRoot}/note/deleteBatch',
			data:"ids="+ids,
			type: 'POST',
			dataType: 'json',
			success: function(data){
				$(".userid").parents("tr").remove();
				layer.msg('已删除!',{icon:1,time:1000});
				window.location.reload();
			}
		});		
	});
}
</script>
</body>
</html>
